<template>
  <div class="result-container">
    <div class="result-content-fexd">
      <div class="result-content flex">
      <svg
        t="1704785322042"
        class="result-content-icon"
        viewBox="0 0 6553 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="923"
        width="32"
        height="32"
      >
        <path
          d="M3071.85919997 82.688V32.6144h106.6368V82.688h299.328v0.384c0 55.5648-47.4624 100.608-106.2528 100.608H2793.88159997V82.688h278.016zM1213.99039997 233.3696c0 38.7072-6.528 80.448-85.248 80.448H223.99999997V227.84h438.144V162.5216H223.99999997V76.6208h438.144V32h113.8176v44.6208h438.0288v5.4528c0 39.0912-6.528 80.448-85.248 80.448h-352.7808V227.84h438.0288v5.5296z m0 410.5344c0 38.784-6.528 80.2944-85.2864 80.2944H223.99999997v-85.632h182.2464V579.968H361.81759997c-72.192 0-130.8288-49.92-130.8288-111.36V362.6624h976.2432v105.9456c0 61.44-58.8672 111.36-131.0208 111.36h-72.6528v58.56h210.432v5.376z m-693.7728-5.376h369.408V579.968h-369.408v58.56z m-146.2272-144.4224h690.0864c16.0512 0 29.2608-11.2128 29.2608-25.4976v-19.968H344.76799997v19.968c0 14.2848 13.1328 25.4976 29.184 25.4976zM4422.84799997 37.1456v49.6896h167.6928v6.7968c0 45.2736-6.4512 94.08-84.4032 94.08h-83.328v165.504h167.7312v6.912c0 45.5808-6.4512 93.9648-84.4032 93.9648h-83.328v165.6192h167.7312v6.7584c0 45.504-6.4512 94.0032-84.4032 94.0032h-83.328v165.6192h167.7312v6.7584c0 45.696-6.4512 94.0032-84.4032 94.0032H4055.85919997V37.1456h100.992v49.6896h165.312V37.1456h100.6848z m-265.9968 316.0704h165.312v-165.504h-165.312v165.504z m0 266.496h165.312v-165.6192h-165.312v165.6192z m0 266.3808h165.312v-165.6192h-165.312v165.6192z m-2949.6576-6.4512c0 61.248-58.8288 110.976-131.0208 110.976H361.85599997c-72.192 0-130.8288-49.728-130.8288-110.976v-106.0608h976.2048v106.0608z m-833.2032 25.4976h690.1248c16.0512 0 29.184-11.4048 29.184-25.4976v-20.2752H344.80639997v20.2752c0 14.0928 13.056 25.4976 29.184 25.4976z m3480.192-350.7456h19.584l-156.9408 355.2c-21.7728 49.2672-53.76 76.2624-157.44 77.2992l154.5984-349.824c30.336-68.9664 76.224-82.6752 140.1984-82.6752zM1832.34559997 824.576a344.3328 344.3328 0 0 0-107.904-16.32c-171.9168 0-328.512 116.0064-360.192 140.9664v-132.8256c103.9104-75.6864 230.592-117.3504 356.736-117.3504 22.5408 0 44.928 1.6512 66.432 4.224 109.0944 13.824 189.888 64.8192 254.8608 105.6384 50.1888 31.7568 89.9328 56.7936 127.6032 56.7936 72 0 77.6064-29.8368 77.6064-72.1152v-147.9552c0-65.3568-16.2432-80.3712-86.784-80.3712H1374.07999997V222.1568h116.0064v239.232h682.9056c126.4896 0 190.656 61.9392 190.656 184.32v165.5808c0 111.552-66.2016 175.6032-181.5168 175.6032-87.4752 0-146.6112-41.2416-209.2032-84.672-42.5856-29.8368-86.5152-60.3648-140.6208-77.6064zM1472.99839997 158.2592c-89.472 0-98.3424-77.376-98.8416-100.992V54.1568h721.6896c161.28 0 218.496 57.2544 218.496 218.496v125.376h-116.1216v-100.608c0-128.8704-21.0048-139.1616-139.392-139.1616H1472.99839997z m2436.9408 29.4528h-192.9216c-31.2576 0-56.064-9.216-73.8816-27.1872-25.1904-25.6128-28.992-62.5152-29.4144-73.728h396.9792V816.512c0 107.7888-28.7232 170.3808-175.872 170.3808h-35.5968v-100.8h35.5968c69.8496 0 75.1104-28.6848 75.1104-69.5808v-299.2896h-126.0672c-153.4464 0-173.184-88.704-173.184-165.888V239.2064h100.7616v112.0896c0 52.6848 2.5344 65.1264 72.4224 65.1264h126.0672V187.712zM2634.13759997 83.5712V35.1488h108.7104v781.2864c0 107.136-63.4752 168.3072-174.0672 168.3072H2493.43999997v-96.5376h63.2064c71.808 0 77.5296-31.0656 77.5296-71.808v-258.2016h-42.24v0.3072H2493.43999997v-0.3072c0.0768-54.144 44.0448-96.4608 98.304-96.4608l0.192-0.0768h42.24V180.1472h-140.736c0-54.2592 43.968-96.576 98.496-96.576h42.24z m305.1648 765.0048l-0.4992-2.688-100.2624-587.4432h3.84c74.6496 0 114.816 31.9872 126.4128 100.5312l64.32 368.8704c6.144 34.56-1.4976 66.5088-22.0032 89.7792a92.352 92.352 0 0 1-68.8512 30.9504h-2.9568z m331.9296 41.7408h206.592v3.4176c-1.5744 53.6064-49.2672 97.4592-106.2528 97.4592H2793.88159997v-100.8768h297.3312c75.8784 0 118.3488-89.3952 145.152-213.5808 3.1104-13.824 56.9472-314.5344 57.4848-317.7984 11.52-68.544 51.7248-100.4544 126.4896-100.4544h3.9936l-0.5376 3.6096-73.9968 429.312c-14.592 87.4368-25.4976 136.4352-78.5664 198.912zM5147.03359997 66.752h223.872v0.3072c0 58.752-47.5008 115.5072-106.176 115.5072H5016.43519997c-78.5664 0-170.9952 44.16-170.9952 178.4064v132.5568h351.8976v0.1536h136.128v0.384c0 58.7136-47.4624 115.3536-106.176 115.3536H4845.43999997v374.4h-115.6992V347.7248c0-146.9952 87.8976-280.9728 277.7088-280.9728h139.584z m1072.704 48.6912c81.1392-89.472 148.2624-42.5088 148.2624 32.8704V872.576c0 61.44-49.8048 111.2832-111.168 111.2832V306.0224c0-25.0752-19.4304-45.696-48.6912-12.5952l-286.1952 281.5872-286.272-281.5872c-31.2576-31.3344-48.4992-12.48-48.4992 12.5952v677.8368h-111.4752V148.3136c0-75.3792 67.2384-122.3424 148.3776-32.8704l297.8688 294.7968 297.792-294.7968z"
          p-id="924"
          fill="#FA2900"
        ></path>
      </svg>
      <el-input
        :prefix-icon="Search"
        class="result-content-input"
        v-model="inputvalue"
      ></el-input>
      <el-button round class="result-content-button">打开APP</el-button>
      <svg
        @click="removeInp"
        v-if="inputvalue"
        class="input-icons"
        t="1704728147094"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="10795"
        width="16"
        height="16"
      >
        <path
          d="M512.2 64.4c-247.4 0-447.9 200.6-447.9 448s200.5 447.9 447.9 447.9 447.9-200.5 447.9-447.9-200.5-448-447.9-448z m203.5 605.9c12.5 12.5 12.5 33.1 0 45.6s-33.1 12.5-45.6 0l-158-158-158 158c-12.5 12.5-33.1 12.5-45.6 0s-12.5-33.1 0-45.6l158-158-158-158c-12.5-12.5-12.5-33.1 0-45.6s33.1-12.5 45.6 0l158 158 158-158c12.5-12.5 33.1-12.5 45.6 0s12.5 33.1 0 45.6l-158 158 158 158z"
          p-id="10796"
          fill="#A3A3AC"
        ></path>
      </svg>
    </div>
    </div>

    <van-tabs
      class="font"
      active="{{ active }}"
      use-before-change="{{ true }}"
      bind:change="onChange"
      @click-tab="onBeforeChange"
    >
      <van-tab title="全部">
        <template #default>
          <div class="all-container">
            <div class="all-container-width">
              <div class="all-container-conten">
                <div class="all-item-top flex">
                  <span>"{{ inputvalue }}"相关的直播</span>
                  <div class="all-item-top-right">
                    <span>更多</span>
                    <svg
                      t="1704811040375"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2191"
                      width="16"
                      height="16"
                    >
                      <path
                        d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z"
                        fill="#A3A3AC"
                        p-id="2192"
                      ></path>
                    </svg>
                  </div>
                </div>
                <div class="wrapper">
                  <ul class="flex wrapperList">
                    <li class="all-item-bottom flex">
                      <img
                        src="https://p.qqan.com/up/2023-12/17023402111364850.jpg"
                        alt=""
                      />
                      <div class="all-item-bottom-title flex-c">
                        <span>未知主播名称</span>
                        <div class="flex num">
                          <svg
                            t="1704814442530"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13296"
                            width="16"
                            height="16"
                          >
                            <path
                              d="M693.76 929.28h-550.4c-17.92 0-38.4-7.68-48.64-23.04-12.8-15.36-17.92-33.28-15.36-51.2l10.24-74.24c2.56-23.04 17.92-40.96 38.4-51.2 35.84-15.36 99.84-40.96 171.52-58.88-35.84-40.96-66.56-107.52-66.56-222.72 0-174.08 102.4-209.92 186.88-209.92s186.88 35.84 186.88 209.92c0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 51.2-15.36 15.36-33.28 23.04-51.2 23.04z m-276.48-637.44c-94.72 0-135.68 48.64-135.68 158.72 0 140.8 46.08 194.56 87.04 215.04 10.24 5.12 15.36 15.36 12.8 28.16-2.56 10.24-10.24 20.48-20.48 20.48-89.6 12.8-179.2 48.64-215.04 64-5.12 2.56-7.68 5.12-7.68 10.24l-10.24 74.24c0 5.12 2.56 10.24 2.56 12.8 2.56 2.56 5.12 5.12 10.24 5.12h550.4c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-2.56-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 2.56-110.08-38.4-158.72-133.12-158.72z"
                              fill="#BBBBC2"
                              p-id="13297"
                            ></path>
                            <path
                              d="M883.2 801.28h-69.12c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h69.12c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-5.12-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 0-110.08-40.96-158.72-135.68-158.72-48.64 0-84.48 12.8-104.96 40.96-7.68 10.24-25.6 12.8-35.84 5.12-10.24-7.68-12.8-25.6-5.12-35.84 30.72-40.96 81.92-61.44 145.92-61.44 84.48 0 186.88 35.84 186.88 209.92 0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 53.76s-30.72 20.48-48.64 20.48z"
                              fill="#BBBBC2"
                              p-id="13298"
                            ></path>
                          </svg>
                          <span>1</span>
                        </div>
                      </div>
                    </li>
                    <li class="all-item-bottom flex">
                      <img
                        src="https://p.qqan.com/up/2023-11/17013057468905180.png"
                        alt=""
                      />
                      <div class="all-item-bottom-title flex-c">
                        <span>未知主播名称</span>
                        <div class="flex num">
                          <svg
                            t="1704814442530"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13296"
                            width="16"
                            height="16"
                          >
                            <path
                              d="M693.76 929.28h-550.4c-17.92 0-38.4-7.68-48.64-23.04-12.8-15.36-17.92-33.28-15.36-51.2l10.24-74.24c2.56-23.04 17.92-40.96 38.4-51.2 35.84-15.36 99.84-40.96 171.52-58.88-35.84-40.96-66.56-107.52-66.56-222.72 0-174.08 102.4-209.92 186.88-209.92s186.88 35.84 186.88 209.92c0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 51.2-15.36 15.36-33.28 23.04-51.2 23.04z m-276.48-637.44c-94.72 0-135.68 48.64-135.68 158.72 0 140.8 46.08 194.56 87.04 215.04 10.24 5.12 15.36 15.36 12.8 28.16-2.56 10.24-10.24 20.48-20.48 20.48-89.6 12.8-179.2 48.64-215.04 64-5.12 2.56-7.68 5.12-7.68 10.24l-10.24 74.24c0 5.12 2.56 10.24 2.56 12.8 2.56 2.56 5.12 5.12 10.24 5.12h550.4c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-2.56-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 2.56-110.08-38.4-158.72-133.12-158.72z"
                              fill="#BBBBC2"
                              p-id="13297"
                            ></path>
                            <path
                              d="M883.2 801.28h-69.12c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h69.12c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-5.12-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 0-110.08-40.96-158.72-135.68-158.72-48.64 0-84.48 12.8-104.96 40.96-7.68 10.24-25.6 12.8-35.84 5.12-10.24-7.68-12.8-25.6-5.12-35.84 30.72-40.96 81.92-61.44 145.92-61.44 84.48 0 186.88 35.84 186.88 209.92 0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 53.76s-30.72 20.48-48.64 20.48z"
                              fill="#BBBBC2"
                              p-id="13298"
                            ></path>
                          </svg>
                          <span>1</span>
                        </div>
                      </div>
                    </li>
                    <li class="all-item-bottom flex">
                      <img
                        src="https://p.qqan.com/up/2021-12/16396235622374082.jpg"
                        alt=""
                      />
                      <div class="all-item-bottom-title flex-c">
                        <span>未知主播名称</span>
                        <div class="flex num">
                          <svg
                            t="1704814442530"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13296"
                            width="16"
                            height="16"
                          >
                            <path
                              d="M693.76 929.28h-550.4c-17.92 0-38.4-7.68-48.64-23.04-12.8-15.36-17.92-33.28-15.36-51.2l10.24-74.24c2.56-23.04 17.92-40.96 38.4-51.2 35.84-15.36 99.84-40.96 171.52-58.88-35.84-40.96-66.56-107.52-66.56-222.72 0-174.08 102.4-209.92 186.88-209.92s186.88 35.84 186.88 209.92c0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 51.2-15.36 15.36-33.28 23.04-51.2 23.04z m-276.48-637.44c-94.72 0-135.68 48.64-135.68 158.72 0 140.8 46.08 194.56 87.04 215.04 10.24 5.12 15.36 15.36 12.8 28.16-2.56 10.24-10.24 20.48-20.48 20.48-89.6 12.8-179.2 48.64-215.04 64-5.12 2.56-7.68 5.12-7.68 10.24l-10.24 74.24c0 5.12 2.56 10.24 2.56 12.8 2.56 2.56 5.12 5.12 10.24 5.12h550.4c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-2.56-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 2.56-110.08-38.4-158.72-133.12-158.72z"
                              fill="#BBBBC2"
                              p-id="13297"
                            ></path>
                            <path
                              d="M883.2 801.28h-69.12c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h69.12c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-5.12-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 0-110.08-40.96-158.72-135.68-158.72-48.64 0-84.48 12.8-104.96 40.96-7.68 10.24-25.6 12.8-35.84 5.12-10.24-7.68-12.8-25.6-5.12-35.84 30.72-40.96 81.92-61.44 145.92-61.44 84.48 0 186.88 35.84 186.88 209.92 0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 53.76s-30.72 20.48-48.64 20.48z"
                              fill="#BBBBC2"
                              p-id="13298"
                            ></path>
                          </svg>
                          <span>1</span>
                        </div>
                      </div>
                    </li>
                    <li class="all-item-bottom flex">
                      <img
                        src="https://pic.qqtn.com/up/2018-2/15182310694782148.jpg"
                        alt=""
                      />
                      <div class="all-item-bottom-title flex-c">
                        <span>未知主播名称</span>
                        <div class="flex num">
                          <svg
                            t="1704814442530"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13296"
                            width="16"
                            height="16"
                          >
                            <path
                              d="M693.76 929.28h-550.4c-17.92 0-38.4-7.68-48.64-23.04-12.8-15.36-17.92-33.28-15.36-51.2l10.24-74.24c2.56-23.04 17.92-40.96 38.4-51.2 35.84-15.36 99.84-40.96 171.52-58.88-35.84-40.96-66.56-107.52-66.56-222.72 0-174.08 102.4-209.92 186.88-209.92s186.88 35.84 186.88 209.92c0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 51.2-15.36 15.36-33.28 23.04-51.2 23.04z m-276.48-637.44c-94.72 0-135.68 48.64-135.68 158.72 0 140.8 46.08 194.56 87.04 215.04 10.24 5.12 15.36 15.36 12.8 28.16-2.56 10.24-10.24 20.48-20.48 20.48-89.6 12.8-179.2 48.64-215.04 64-5.12 2.56-7.68 5.12-7.68 10.24l-10.24 74.24c0 5.12 2.56 10.24 2.56 12.8 2.56 2.56 5.12 5.12 10.24 5.12h550.4c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-2.56-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 2.56-110.08-38.4-158.72-133.12-158.72z"
                              fill="#BBBBC2"
                              p-id="13297"
                            ></path>
                            <path
                              d="M883.2 801.28h-69.12c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h69.12c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-5.12-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 0-110.08-40.96-158.72-135.68-158.72-48.64 0-84.48 12.8-104.96 40.96-7.68 10.24-25.6 12.8-35.84 5.12-10.24-7.68-12.8-25.6-5.12-35.84 30.72-40.96 81.92-61.44 145.92-61.44 84.48 0 186.88 35.84 186.88 209.92 0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 53.76s-30.72 20.48-48.64 20.48z"
                              fill="#BBBBC2"
                              p-id="13298"
                            ></path>
                          </svg>
                          <span>1</span>
                        </div>
                      </div>
                    </li>
                    <li class="all-item-bottom flex">
                      <img
                        src="https://pic.qqtn.com/up/2018-2/15182312539878432.jpg"
                        alt=""
                      />
                      <div class="all-item-bottom-title flex-c">
                        <span>未知主播名称</span>
                        <div class="flex num">
                          <svg
                            t="1704814442530"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13296"
                            width="16"
                            height="16"
                          >
                            <path
                              d="M693.76 929.28h-550.4c-17.92 0-38.4-7.68-48.64-23.04-12.8-15.36-17.92-33.28-15.36-51.2l10.24-74.24c2.56-23.04 17.92-40.96 38.4-51.2 35.84-15.36 99.84-40.96 171.52-58.88-35.84-40.96-66.56-107.52-66.56-222.72 0-174.08 102.4-209.92 186.88-209.92s186.88 35.84 186.88 209.92c0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 51.2-15.36 15.36-33.28 23.04-51.2 23.04z m-276.48-637.44c-94.72 0-135.68 48.64-135.68 158.72 0 140.8 46.08 194.56 87.04 215.04 10.24 5.12 15.36 15.36 12.8 28.16-2.56 10.24-10.24 20.48-20.48 20.48-89.6 12.8-179.2 48.64-215.04 64-5.12 2.56-7.68 5.12-7.68 10.24l-10.24 74.24c0 5.12 2.56 10.24 2.56 12.8 2.56 2.56 5.12 5.12 10.24 5.12h550.4c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-2.56-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 2.56-110.08-38.4-158.72-133.12-158.72z"
                              fill="#BBBBC2"
                              p-id="13297"
                            ></path>
                            <path
                              d="M883.2 801.28h-69.12c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h69.12c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-5.12-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 0-110.08-40.96-158.72-135.68-158.72-48.64 0-84.48 12.8-104.96 40.96-7.68 10.24-25.6 12.8-35.84 5.12-10.24-7.68-12.8-25.6-5.12-35.84 30.72-40.96 81.92-61.44 145.92-61.44 84.48 0 186.88 35.84 186.88 209.92 0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 53.76s-30.72 20.48-48.64 20.48z"
                              fill="#BBBBC2"
                              p-id="13298"
                            ></path>
                          </svg>
                          <span>1</span>
                        </div>
                      </div>
                    </li>
                    <li class="all-item-bottom flex">
                      <img
                        src="https://p.qqan.com/up/2021-8/16294278909011061.jpg"
                        alt=""
                      />
                      <div class="all-item-bottom-title flex-c">
                        <span>未知主播名称</span>
                        <div class="flex num">
                          <svg
                            t="1704814442530"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13296"
                            width="16"
                            height="16"
                          >
                            <path
                              d="M693.76 929.28h-550.4c-17.92 0-38.4-7.68-48.64-23.04-12.8-15.36-17.92-33.28-15.36-51.2l10.24-74.24c2.56-23.04 17.92-40.96 38.4-51.2 35.84-15.36 99.84-40.96 171.52-58.88-35.84-40.96-66.56-107.52-66.56-222.72 0-174.08 102.4-209.92 186.88-209.92s186.88 35.84 186.88 209.92c0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 51.2-15.36 15.36-33.28 23.04-51.2 23.04z m-276.48-637.44c-94.72 0-135.68 48.64-135.68 158.72 0 140.8 46.08 194.56 87.04 215.04 10.24 5.12 15.36 15.36 12.8 28.16-2.56 10.24-10.24 20.48-20.48 20.48-89.6 12.8-179.2 48.64-215.04 64-5.12 2.56-7.68 5.12-7.68 10.24l-10.24 74.24c0 5.12 2.56 10.24 2.56 12.8 2.56 2.56 5.12 5.12 10.24 5.12h550.4c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-2.56-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 2.56-110.08-38.4-158.72-133.12-158.72z"
                              fill="#BBBBC2"
                              p-id="13297"
                            ></path>
                            <path
                              d="M883.2 801.28h-69.12c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h69.12c5.12 0 10.24-2.56 10.24-5.12 2.56-2.56 5.12-5.12 2.56-12.8l-10.24-74.24c0-5.12-5.12-10.24-7.68-10.24-33.28-15.36-122.88-51.2-212.48-64-10.24-2.56-20.48-10.24-20.48-20.48s2.56-23.04 12.8-28.16c56.32-28.16 84.48-102.4 84.48-215.04 0-110.08-40.96-158.72-135.68-158.72-48.64 0-84.48 12.8-104.96 40.96-7.68 10.24-25.6 12.8-35.84 5.12-10.24-7.68-12.8-25.6-5.12-35.84 30.72-40.96 81.92-61.44 145.92-61.44 84.48 0 186.88 35.84 186.88 209.92 0 115.2-28.16 184.32-64 222.72 71.68 15.36 133.12 40.96 168.96 58.88 20.48 10.24 35.84 28.16 38.4 51.2l10.24 74.24c2.56 17.92-2.56 38.4-15.36 53.76s-30.72 20.48-48.64 20.48z"
                              fill="#BBBBC2"
                              p-id="13298"
                            ></path>
                          </svg>
                          <span>1</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="all-container-conten1">
                <div class="all-item-top flex">
                  <span>"{{ inputvalue }}"相关的专辑</span>
                  <div class="all-item-top-right">
                    <span>更多</span>
                    <svg
                      t="1704811040375"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2191"
                      width="16"
                      height="16"
                    >
                      <path
                        d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z"
                        fill="#A3A3AC"
                        p-id="2192"
                      ></path>
                    </svg>
                  </div>
                </div>
                <resultItem v-for="(albumsItem,index) in albumsList" :key="index" :albumsItem="albumsItem.albumInfo"></resultItem>
              </div>
              <div class="all-container-conten1">
                <div class="all-item-top flex">
                  <span>"{{ inputvalue }}"相关的专辑</span>
                  <div class="all-item-top-right">
                    <span>更多</span>
                    <svg
                      t="1704811040375"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2191"
                      width="16"
                      height="16"
                    >
                      <path
                        d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z"
                        fill="#A3A3AC"
                        p-id="2192"
                      ></path>
                    </svg>
                  </div>
                </div>
                <muesuitItem v-for="( tracksItem,index) in tracksList" :key="index" :tracksItem="tracksItem.trackInfo"></muesuitItem>
              </div>
            </div>
            <div class="all-container-bottom">
              <div class="all-container-bottom-title">相关搜索</div>
              <div class="all-container-bottom-list flex">
                <span>圈小米</span>
                <span>神瑜天尊</span>
                <span>神瑜天尊</span>
              </div>
            </div>
            <bottomItem></bottomItem>
          </div>
        </template>
      </van-tab>
      <van-tab title="专辑">
        <template #default>
          
          <van-dropdown-menu>
            <van-dropdown-item title="分类" :options="option1" />
            <van-dropdown-item title="排序方式" :options="option2" />
            <van-dropdown-item title="是否付费" :options="option3" />
          </van-dropdown-menu>
          <div class="resultItem">
            <resultItem v-for="(albumsItem,index) in albumsList" :key="index" :albumsItem="albumsItem.albumInfo"></resultItem>
            <bottomItem></bottomItem>
          </div>
        </template>
      </van-tab>
      <van-tab title="声音">
        <template #default>
          <van-dropdown-menu>
            <van-dropdown-item title="排序方式" :options="option2" />
            <van-dropdown-item title="是否付费" :options="option3" />
          </van-dropdown-menu>
          <div class="resultItem">
            <muesuitItem v-for="( tracksItem,index) in tracksList" :key="index" :tracksItem="tracksItem.trackInfo"></muesuitItem>
          </div>
          <bottomItem></bottomItem>
        </template>
      </van-tab>
      <van-tab title="主播"></van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { reqSearchResult } from "../../api/search";
import { useRoute } from "vue-router";
import resultItem from "@/components/result-item/index.vue";
import BScroll from "@better-scroll/core";
import { nextTick } from "vue";
import muesuitItem from "@/components/muesuit-item/index.vue";
import bottomItem from '@/components/bottom-item/index.vue'
import { useRouter } from "vue-router";


const $route = useRoute();
const router = useRouter()
const inputvalue = ref<any>("");
const params: any = {
  core: "all",
  page: 1,
  rows: 10,
};
const option1 = ref([
{ text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
])

const option2 = ref([
{ text: '默认排序', value: 'a' },
      { text: '好评排序', value: 'b' },
      { text: '销量排序', value: 'c' },
])
const option3 = ref([
  {
    text:'全部免费',value: 'A'
  },
  {
    text:'付费',value:'B'
  },
  {
    text:'部分付费',value:'C'
  }
])
// 专辑的数据
const albumsList = ref([]);

// 声音的数据
const tracksList = ref([]);




// 清除input的值----回调
const removeInp = () => {
  inputvalue.value = "";
  router.push({
      path:'/search'
    })
};

onMounted(() => {
  console.log($route.query);
  inputvalue.value = $route.query.kw;
  params.kw = $route.query.kw;
  if (params.kw) {
    console.log(params);
    getSearchResult(params);
  }

  nextTick(() => {
    const bs = new BScroll(".wrapper", {
      scrollX: true,
      click: true,
      bounce: true,
    });
  });
});
// 获取搜索结果的功能函数
async function getSearchResult(params: any) {
  console.log(params);
  try {
    let result = await reqSearchResult(params);
    console.log(result);
    if(result.ret == 0){
      // 储存专辑的数据
      albumsList.value = result.data.albumViews.albums;
      tracksList.value = result.data.trackViews.tracks;
    }
  } catch (error) {
    console.log(error);
  }
}
</script>

<style scoped>

.result-content-fexd {
  position: fixed;
  top:0px;
  z-index: 999;
  right: -7px;
}
.all-container-conten1 {
  margin-top: 10px;
}
::v-deep(.van-tab__text) {
  font-size: 13px;
  transition: font-size 0.3s ease;
  cursor: pointer;
}
::v-deep(.van-tab__text):hover {
  font-size: 20px;
}
.result-container {
  /* padding: 10px; */
  width: 100%;
}
.result-content {

  background-color: #FFFFFF;
  justify-content: space-around;
  /* width: 100%; */
  height: 40px;
  position: relative;
  padding: 15px 15px 0px 15px;
  /* box-sizing: border-box; */
}
::v-deep(.van-tabs__wrap){
  position: fixed;
  z-index: 999;
  background-color: #FFFFFF;
  top: 55px;
  width: 370px;
    height: 25px;
}
.result-content-icon {
  width: 80px;
  margin-left: 20px;
}
.result-content-input {
  width: 200px;
  height: 30px;
  padding-left: 20px;
}
:deep(.el-input__wrapper) {
  border-radius: 50px;
  background-color: #eff1f4;
  box-shadow: none !important;
}
.result-content-button {
  width: 58px;
  height: 30px;
  border: 1px solid #f66846;
  color: #f66846;
  font-size: 12px;
  margin-left: 10px;
}
.input-icons {
  position: absolute;
  right: 90px;
  top: 22px;
}

/* tabs样式 */

::v-deep(.van-tabs__wrap) {
  height: 30px;
  color: #f66846;
  border-bottom: 1px solid #eff1f4;
  color: #a3a3ac;
}
::v-deep(.van-tab__text) {
  padding-bottom: 5px;
}
::v-deep(.van-tabs__line) {
  background-color: #f06742;
  width: 20px;
  font-size: 20px;
}

/* 全部的样式 */
.all-container-conten {
  height: 80px;
  width: 100%;
  /* margin: 15px 15px 0px 15px; */
}
.all-container {
  /* width: 100%; */
  margin-top: 85px;
}
.all-container-width {
  width: 100%;
  padding: 15px 15px 0px 15px;
  box-sizing: border-box;
}
.all-item-top {
  justify-content: space-between;
}
.all-item-top > span {
  font-size: 18px;
}
.all-item-top-right {
  font-size: 12px;
  color: #72727b;
  line-height: 24px;
}
.all-item-top-right > svg {
  width: 10px;
  height: 10px;
}
.all-item-bottom {
  height: 40px;
  margin-top: 15px;
  margin-right: 15px;
}

.all-item-bottom > img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.all-item-bottom-title {
  width: 100px;
  margin-left: 5px;
}
.all-item-bottom-title > span {
  font-size: 14px;
}
.num > span {
  font-size: 12px;
  color: #a3a3ac;
  margin-left: 3px;
}

/* BetterScroll样式 */
.wrapper {
  width: 99%;
  overflow: hidden;
}
.wrapperList {
  width: 1000px;
}

/* 底部 */
.all-container-bottom {
  height: 80px;
  padding: 20px 10px 0px 10px;
}
.all-container-bottom-title {
  font-size: 18px;
  color: #40404c;
  margin-bottom: 10px;
}
.all-container-bottom-list {
  justify-content: space-between;
}
.all-container-bottom-list > span {
  font-size: 15px;
  color: #333;
  margin: 5px 10px 10px 0;
  padding: 5px 15px;
  background-color: #f3f4f5;
  border-radius: 5px;
}
/* .result-content {

} */


::v-deep(.van-dropdown-menu){
  margin-top: 85px;
}
.resultItem {
  padding: 0px 10px;
}
</style>
